import React, { Component } from 'react'
import { connect } from 'react-redux'
function addEvent(val) {
  return {
    type: 'addEvent',
    payload: val,
  }
}
function delFun(id) {
  return {
    type: 'delFun',
    payload: id,
  }
}

class Index extends Component {
  addInput = React.createRef()
  render() {
    console.log(this.props)
    return (
      <div>
        <ul>
          {this.props.todolist.map((item, index) => {
            return (
              <li
                key={item.id}
                style={{
                  border: '1px solid #ccc',
                  height: '50px',
                  lineHeight: '50px',
                  paddingLeft: '10px',
                }}
              >
                {item.title}
                <button
                  onClick={() => {
                    var id = index
                    this.props.delFun(id)
                  }}
                  style={{ width: '50px', height: '50px' }}
                >
                  删除
                </button>
              </li>
            )
          })}
        </ul>
        <input placeholder="请输入要添加的内容" ref={this.addInput} />
        <button
          onClick={() => {
            const val = this.addInput.current.value
            console.log(val)
            val && this.props.addEvent(val)
          }}
        >
          添加
        </button>
      </div>
    )
  }
}

function MapStateToProps(state) {
  return state.todolist
}
const MapDisPatchToProps = {
  addEvent,
  delFun,
}

export default connect(MapStateToProps, MapDisPatchToProps)(Index)
